// 实现这个项目的构建任务
const { src,dest, parallel, series, watch } = require('gulp');
// const plugins.sass = require('gulp-sass');
// const plugins.babel = require('gulp-babel');
// const plugins.swig = require('gulp-swig');

// 获取 data 模版数据
const data = {
    build: {
      src: 'src',
      dist: 'release',
      temp: '.tmp',
      public: 'public',
      paths: {
        styles: 'assets/styles/*.scss',
        scripts: 'assets/scripts/*.js',
        pages: '*.html',
        images: 'assets/images/**',
        fonts: 'assets/fonts/**'
      }
    },
    data: {
      menus: [
        {
          name: 'Home',
          icon: 'aperture',
          link: 'index.html'
        },
        {
          name: 'Features',
          link: 'features.html'
        },
        {
          name: 'About',
          link: 'about.html'
        },
        {
          name: 'Contact',
          link: '#',
          children: [
            {
              name: 'Twitter',
              link: 'https://twitter.com/w_zce'
            },
            {
              name: 'About',
              link: 'https://weibo.com/zceme'
            },
            {
              name: 'divider'
            },
            {
              name: 'About',
              link: 'https://github.com/zce'
            }
          ]
        }
      ],
      pkg: require('./package.json'),
      date: new Date()
    }
  };
// const plugins.imagemin = require('gulp-imagemin');
const del = require('del');

// 开发服务器
const browerSync = require('browser-sync');

// gulp 插件管理, 那么就不需要require很多的 gulp 插件
const loadPlugins = require('gulp-load-plugins');
const plugins = loadPlugins();

// 创建开发服务器
const bs = browerSync.create();

// del 删除先dist下目录文件
const clean = () => {
    return del(['dist', 'temp'])
};
const style = () => {
    return src('src/assets/styles/*.scss', {base: 'src'})
        .pipe(plugins.sass({outputStyle: 'expanded'}))
        .pipe(dest('temp'))
}
const script = () => {
    return src('src/assets/scripts/*.js', {base: 'src'})
        .pipe(plugins.babel({presets: ['@babel/preset-env']}))
        .pipe(dest('temp'))
}
// 读取模板文件
const page = () => {
    return src('src/*html', {base: 'src'})
    .pipe(plugins.swig({data}))
    .pipe(plugins.swig({defaults: { cache: false }})) // swig 模版缓存不自动刷新页面处理
    .pipe(dest('temp'));
}

const image = () => {
    return src('src/assets/images/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
    return src('src/assets/fonts/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
    return src('public/**', {base: 'public'})
    .pipe(dest('dist'))
}

// 定一个服务任务启动, 对应的目录为 dist
const serve = () => {
    // 监听源文件
    watch('./src/assets/styles/*.scss', style)
    watch('./src/assets/scripts/*.js', script)
    watch('./src/*html', page)
    // watch('./src/assets/images/**', image)
    // watch('./src/assets/fonts/**', font)
    // watch('./public/**', extra)

    watch([
        './src/assets/images/**',
        './src/assets/fonts/**',
        './public/**'
    ], bs.reload)
    bs.init({
        notify: false, // 取消提示
        port: 3080,
        // open: false,
        files: 'temp/**', // dist 下所有文件修改以后页面自动刷新
        cache:false,
        server: {
            baseDir: ['temp', 'src', 'public'],
            routes: { // 优先于baseDir的配置，请求发生以后先走routes里的配置
                '/node_modules': 'node_modules'
            }
        }
    })
}
// useref 将html中的构建注释 转换 合并， 解决文件冲突 
const useref = () => {
    return src('temp/*.html', {base: 'temp'})
    .pipe(plugins.useref({searchPath: ['temp', '.']}))
    // html js css 压缩处理
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    // html 里 style 标签及 script 标签里压缩
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
    })))
    .pipe(dest('dist'))
}

// 对 sass，js，html 的解析
const compile = parallel(style, script, page);
// 先删除再去执行构建及文件拷贝
const build = series(clean, parallel(series(compile, useref), extra, image, font));

const develop = series(compile, serve);

module.exports = {
    build,
    serve,
    develop
}